﻿<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <title id="Description">AngularJS DataTable with Custom Editor. The first column's editor is jqxInput created from jqx-input tag.</title>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../sampledata/generatedata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]); 
        demoApp.controller("demoController", function ($scope) {  
            var dataTable;
            $scope.data = generatedata(85);
            $scope.editorData = ['Andrew', 'Martin', 'Peter', 'Yoshi', 'Petra', 'Nancy', 'Beate', 'Antoni', 'Lars', 'Shelley'];
            $scope.dataTableSettings =
            {
                source:  {
                    localdata: $scope.data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ],
                    sortcolumn: 'firstname',
                    sortdirection: 'asc'
                },
                pageable: true,
                altRows: true,
                width: 650,
                editable: true,
                created: function(args)
                {
                    dataTable = args.instance;
                },
                columns: [
                  {
                      text: 'First Name', columntype: 'template', datafield: 'firstname', width: 180, createEditor: function (row, cellvalue, editor, cellText, width, height) {
                          // construct the editor.
                          var inputElement = "<jqx-input jqx-source=editorData jqx-height=" + height + " jqx-width=" + width + " style='padding-left: 4px; border: none;'></jqx-input>"
                          editor.html(inputElement);
                          // compile the Editor. 
                          $.jqx.angularCompile(editor);
                      },
                      initEditor: function (row, cellvalue, editor, celltext, width, height) {
                          // set the editor's current value. The callback is called each time the editor is displayed.
                          var inputField = editor.find('input');
                          inputField.val(cellvalue);
                          setTimeout(function () {
                              inputField.focus();
                          }, 100); 
                      },
                      getEditorValue: function (row, cellvalue, editor) {
                          // return the editor's value.
                          return editor.find('input').val();
                      }
                  },
                  { text: 'Last Name', dataField: 'lastname', width: 200 },
                  { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, align: 'right', cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', align: 'right', cellsalign: 'right', cellsFormat: 'c2' }
                ]
            };
        });
    </script>
</head>
 <body ng-controller="demoController">
    <jqx-data-table jqx-settings="dataTableSettings"></jqx-data-table>
</body>
</html>
